<template lang="html">
  <div>
    <div class="container-body w">
      <!-- 热门职位 -->
      <div class="card-container">
        <div class="title">
          <h2>热门职位</h2>
        </div>
        <Row>
        <div v-for="(item,index) in recruitlist" :key="index" @click="toRecruitdetail(item.id)">
          <Col span="24">
          <Card style="border-radius:0;">
            <div class="recruit" style="text-align:center">
              <div class="rtitle">
                <div class="title-text">
                  {{item.title}}
                </div>                
              </div>
              <div class="rtags">
                <span class="salary-text">
                  {{dbase.jobsalaries[item.salaryindex]}}
                </span>
                <span>{{dbase.degrees[item.degreesindex]}}</span>
                <span>{{dbase.experiences[item.experiencesindex]}}</span>
                <span>招{{item.recruitnum}}人</span>
              </div>
              <div class="wel">
                <span v-for="(wel,indexs) in item.chosewelfare" :key="indexs">{{wel}}</span>
              </div>
              <div class="poster" v-if="item.isc == 1">
                <div class="post-com" v-if="item.cominfo">
                  <img class="post-comlogo" :src="item.cominfo.logo ? item.cominfo.logo : '/static/images/qy_uplogo.png'" alt="">
                  <div class="post-cominfo">
                    <div class="cominfo-name">
                      {{item.cominfo.comname}}
                    </div>
                  </div>
                </div>
                <div class="apply">
                  <span>申请</span>
                </div>
              </div>
              <div class="poster wordcut" v-if="item.isc == 2">
                <div class="post-com">
                  <img class="post-comlogo" src="/static/images/qy_uplogo.png" alt="">
                  <div class="post-cominfo">
                    <div class="cominfo-name">
                      个人实名发布者
                    </div>
                  </div>
                </div>
                <div class="apply">
                  <span>申请</span>
                </div>
              </div>
              <div class="poster wordcut" v-if="item.isc == 0">
                <div class="post-com">
                  <img class="post-comlogo" src="/static/images/qy_uplogo.png" alt="">
                  <div class="post-cominfo">
                    <div class="cominfo-name">
                      个人未实名发布者
                    </div>
                  </div>
                </div>
                <div class="apply">
                  <span>申请</span>
                </div>
              </div>
            </div>
          </Card>
          </Col>
        </div>
      </Row>
        <div class="more" v-show="showmore">
          <button class="more-btn" @click="getRecruitlistlist">加载更多</button>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recruitlist: [],
      dbase: [],
      page: 1,
      showmore:true,
    };
  },
  created: function() {
    var that = this;

    that.$axios.get(that.$http.apiurl("mpinfo")).then(res => {
      that.dbase = res.data.dbase;
    });

    if(that.$route.query.cname){
      that.search_jobdata(that.$route.query.cname);
       that.showmore = false
    }else{
       that.getRecruitlistlist();
    }
   
  },
  methods: {
    getRecruitlistlist() {
      var that = this;
      console.log(this.page);

      that.$axios
        .get(that.$http.apiurl("position", { page: that.page }))
        .then(res => {
          console.log(res.data);
          if (res.data.length > 0) {
            if (that.recruitlist.length > 0) {
              var rarr = that.recruitlist;

              that.recruitlist = rarr.concat(res.data);
              that.page = this.page + 1;
            } else {
              that.recruitlist = res.data;
              that.page = this.page + 1;
            }
          } else {
          }
        });
    },
    // 执行搜索
			search_jobdata(cname) {
				this.$http.aget('seach', {
					op: 'zpxx',
					cname: cname
				}).then(res => {
					console.log(res);
					this.recruitlist = res;
				})
			},
    toRecruitdetail(e) {
      this.$router.push({ name: "recruitdetail", query: { zid: e } });
    }
  }
};
</script>

<style lang="scss" scoped>
body {
  background-color: #f1f1f1;
}
.card-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 50px;

  .title {
    padding-bottom: 10px;
    margin: 10px 0;
  }

  // 热门职位
  .recruit {
    text-align: left !important;

    .rtitle {
      display: flex;
      justify-content: space-between;

      .title-text {
        font-size: 16px;
        font-weight: 600;
        max-width: 180px;
      }
    }

    .rtags {
      .salary-text {
        font-size: 16px;
        font-weight: 600;
        color: red;
      }
      margin-top: 3px;
      color: #999;
      padding-bottom: 10px;
    }

    .wel {
      margin-top: 3px;
      color: #999;

      span {
        display: inline-block;
        width: 61px;
        height: 26px;
        padding: 0 5px;
        font-size: 12px;
        line-height: 26px;
        color: #999;
        border: 1px solid #f0f0f0;
        border-radius: 3px;
        text-align: center;
      }
    }

    .poster {
      display: flex;
      align-items: center;
      justify-content: space-between;
       margin-top: 18px;
        padding-top: 18px;
        border-top: 1px dashed #e0e0e0;

      .post-com {       

        .post-comlogo {
          float: left;
          width: 30px;
          height: 30px;
        }

        .post-cominfo {
          margin-left: 34px;

          .cominfo-name {
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: center;
          }

          .cominfo-tags {
            color: #0c8;
          }
        }
      }

      .apply {
        width: 98px;
        height: 48px;

        span {
          line-height: 48px;
          background: linear-gradient(to right, #11a984, #00cc88);
          width: 100%;
          height: 30px;
          font-size: 20px;
          color: #fff;
          padding: 10px 20px;
          box-shadow: 0 2px 5px rgba(0, 230, 153, 0.35);
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
